<template>
  <div class="foot">
    <div class="proportion" >
      <h2 class="chart-title">实时预警信息</h2>
      <v-table class="proportion-chart"
               style="background-color:#000000;opacity: 0.8; color: red;font-size: x-large"
               :width="1320"
               :height = "300"
               :title-bg-color = "titlecolor"
               :show-header="false"
               :row-height="70"
               :columns="columns"
               :show-vertical-border="false"
               :title-cell-class-name="titlecellclassname"
               :table-data="tableData">
      </v-table>
    </div>

    <div class="tongbi chart-wrap">
      <h2 class="chart-title">当月隐患趋势图</h2>
      <ve-histogram :data="chartData" :settings="chartSettings"  class="tongbi-chart" :theme="theme"></ve-histogram>


    </div>
  </div>
</template>
<script>
  import Data from '../../../data/fantasy/castle/foot'
  import Vehistogram from 'v-charts/lib/histogram.common'
  // 导入 css
  import 'vue-easytable/libs/themes-base/index.css'

  // 导入 table 组件 和分页组件
  import {VTable} from 'vue-easytable'
  Data()
  export default {
    name: 'foot',
    components: {
      VTable,
      Vehistogram
    },
    data () {
      return {
        'poptableitem': {},
        'titlecellclassname': 'title-cell-class-name',
        'theme': {
          'backgroundColor': 'rgba(51,51,51,0.5)',
          categoryAxis: {
            axisLabel: {
              color: '#fff',
              fontSize: 20
            }
          },
          valueAxis: {
            axisLabel: {
              color: '#fff',
              fontSize: 20
            }
          },
          legend: {
            textStyle: {
              fontSize: 25,
              color: '#fff'
            }
          }
        },
        titlecolor: '#333333',
        chartSettings: {
          stack: { '用户': ['已处理隐患', '未处理隐患'] },
          showLine: ['处理率'],
          axisSite: { right: ['处理率'] },
          yAxisType: ['KMB', 'percent'],
          yAxisName: ['数值', '比率']
        },

        chartData: {
          columns: ['日期', '已处理隐患', '未处理隐患', '处理率'],
          rows: [
          ]
        },
        tableData: [],
        columns: [
          {field: 'ProjectName', title: '项目名称', width: 250, titleAlign: 'center', columnAlign: 'center'},
          {field: 'LogTime', title: '故障最早发生时间', width: 280, titleAlign: 'center', columnAlign: 'center'},
          {field: 'LogEndTime', title: '故障最后发生时间', width: 280, titleAlign: 'center', columnAlign: 'center'},
          {field: 'ErrorName', title: '描述', width: 200, titleAlign: 'center', columnAlign: 'center'},
          {field: 'errorType', title: '故障类型', titleAlign: 'center', columnAlign: 'center'}
        ],
        chartDate: {}
      }
    },
    mounted () {
      this.dealErrorChart()
      this.dealTableData()
      this.refresh()
    },
    methods: {
      dealErrorChart () {
        this.postRequest('Analysis/errorChart', {
          devType: '0'
        }).then((res) => {
          console.log('刷新当月隐患趋势图')
          this.chartData.rows = []
          res.data.data.forEach((item) => {
            var charDataItem = {'日期': '0', '已处理隐患': 0, '未处理隐患': 0, '处理率': 0}
            charDataItem.日期 = item.DAY + '日'
            charDataItem.已处理隐患 = item.processed
            charDataItem.未处理隐患 = item.unprocess
            if (item.unprocess === 0) {
              charDataItem.处理率 = 1
            } else {
              charDataItem.处理率 = (item.processed / item.total)
            }
            this.chartData.rows.push(charDataItem)
          })
        })
      },
      dealTableData () {
        this.postRequest('Error/List', {
          errorType: '-1',
          LogType: '-1'
          // pageno: '1',
          // pagesize: '1'
        }).then((res) => {
          // if (res.data.data.length > 0) {
          //   res.data.data.forEach((item) => {
          //     if (item.LogEndTime === null) {
          //       item.LogEndTime = '无数据'
          //     }
          //     if (item.ProjectName === null) {
          //       item.ProjectName = '无数据'
          //     }
          //     if (item.LogTime === null) {
          //       item.LogTime = '无数据'
          //     }
          //     if (item.ErrorName === null) {
          //       item.ErrorName = '无数据'
          //     }
          //     if (item.errorType === 0) {
          //       item.errorType = '报警'
          //     } else if (item.errorType === 1) {
          //       item.errorType = '故障'
          //     } else if (item.errorType === 2) {
          //       item.errorType = '系统'
          //     }
          //   })
          // }
          res.data.data.forEach((item) => {
            if (item.LogEndTime === null) {
              item.LogEndTime = '无数据'
            }
            if (item.ProjectName === null) {
              item.ProjectName = '无数据'
            }
            if (item.LogTime === null) {
              item.LogTime = '无数据'
            }
            if (item.ErrorName === null) {
              item.ErrorName = '无数据'
            }
            if (item.errorType === 0) {
              item.errorType = '报警'
            } else if (item.errorType === 1) {
              item.errorType = '故障'
            } else if (item.errorType === 2) {
              item.errorType = '系统'
            }
          })
          if (res.data.data.length > 0) {
            this.tableData = res.data.data
            var error = ['报警预警', '故障预警', '系统预警']
            var errornamnArr = res.data.data[0].ErrorName.split('')
            errornamnArr.forEach((item, index) => {
              if (item === '相') {
                errornamnArr[index] = '像'
              }
            })
            var errorName = errornamnArr.join('')
            var ttsConetent = '有新的' + error[0] + '  ' + errorName
            console.log(ttsConetent)
            new Audio(
              'http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=' + ttsConetent
            ).play()
          } else {
            this.tableData = [{
              ProjectName: '无数据',
              LogTime: '无数据',
              ErrorName: '无数据',
              LogEndTime: '无数据',
              errorType: '无数据'
            }]
          }
        })
      },
      scrollPop () {
        this.poptableitem = this.tableData.shift()
      },
      scrollPush () {
        this.tableData.push(this.poptableitem)
      },
      refresh () {
        setInterval(this.dealTableData, 30000)
        setInterval(this.dealErrorChart, 100000)
        setInterval(this.scrollPop, 500)
        setInterval(this.scrollPush, 500)
      }
    }
  }
</script>
<style scoped>
  .proportion {
    position: absolute;
    top: 1460px;
    left: 80px;
    width: 1320px;
    height: 410px;
    background: url(../../../assets/images/fantasy/castle/foot-title-bg.png) no-repeat top left;
  }

  .proportion .chart-title,
  .tongbi .chart-title {
    top: 0px;
  }
  .title-cell-class-name{
    background-color: #f60;
    color:#fff;
  }
  .v-table-title-class {

     color: #333333;
     text-shadow: 0 0 0 #333333;
  }
  .tongbi {
    position: absolute;
    top: 1460px;
    right: 70px;
    width: 1320px;
    height: 410px;
    background: url(../../../assets/images/fantasy/castle/foot-title-bg.png) no-repeat top left;
    z-index: 0;
  }

  .chart-legend {
    position: absolute;
    top: 0px;
    right: 80px;
    width: 430px;
    height: 100px;
  }

  .proportion .chart-legend {
    left: 960px;
  }

  .chart-legend li {
    color: #fff;
    font-size: 32px;
    display: inline-block;
    height: 70px;
    width: 140px;
    text-align: right;
    cursor: pointer;
  }

  .proportion .chart-legend li:first-child {
    background: url(../../../assets/images/fantasy/castle/chart-legend-value.png) no-repeat 46px 14px;
  }

  .proportion .chart-legend li:last-child {
    background: url(../../../assets/images/fantasy/castle/chart-legend-com2.png) no-repeat 14px 14px;
  }

  .tongbi .chart-legend li:nth-child(1) {
    background: url(../../../assets/images/fantasy/castle/chart-legend-tb.png) no-repeat 14px 14px;
  }

  .tongbi .chart-legend li:nth-child(2) {
    background: url(../../../assets/images/fantasy/castle/chart-legend-now.png) no-repeat 14px 14px;
  }

  .tongbi .chart-legend li:nth-child(3) {
    background: url(../../../assets/images/fantasy/castle/chart-legend-hb.png) no-repeat 14px 14px;
  }

  .proportion-chart {
    position: absolute;
    top: 80px;
    left: 0;
    width: 1320px;
    height: 330px;
    font-weight: normal;
    color: #333333;
    text-shadow: 0 0 0 #333333;
    background-color: #00FFFFFF;

  }

  .tongbi-chart {
    position: absolute;
    top: 50px;
    left: 0;
    width: 1320px;
    height: 330px;

  }

</style>
